<template>
  <div class="detail-wrap">
    <common-back :content="title"></common-back>
    <van-loading class="v-loading"
                 size="30px"
                 color="white"
                 v-show="!list.length" />
    <common-scroll class="scroll"
                   ref="scroll">
      <div class="scroll-content">
        <order-list class="list"
                    :orderNo="info.order_no"
                    :status="info.status.status"
                    :list="list"
                    v-if="list.length" :payPrice="info.pay_price"></order-list>
        <div class="info">
          <ul class="order-time-list">
            <li class="order-time-item"
                border-bottom-1px>
              <div class="order-time-item-title">下单时间：</div>
              <div class="time">{{info.createtime}}</div>
            </li>
            <li class="order-time-item"
                border-bottom-1px>
              <div class="order-time-item-title">付款时间：</div>
              <div class="time">{{info.pay_time}}</div>
            </li>
            <li class="order-time-item"
                border-bottom-1px>
              <div class="order-time-item-title">发货时间：</div>
              <div class="time">{{info.deliverytime}}</div>
            </li>
            <li class="order-time-item"
                border-bottom-1px>
              <div class="order-time-item-title">收货时间：</div>
              <div class="time">{{info.receivetime}}</div>
            </li>
          </ul>
          <ul class="logistics-list">
            <li class="logistics-item">
              <div class="logistics-item-title">物流单号</div>
              <div class="logistics-item-content">{{info.express_no}}</div>
            </li>
            <li class="logistics-item">
              <div class="logistics-item-title">物流公司</div>
              <div class="logistics-item-content">{{info.express_name}}</div>
            </li>
          </ul>
          <div class="btn-wrap">
            <div class="after-sale btn"
                 @click="handleAfterSale">申请售后</div>
            <div class="affirm btn"
                 @click="handleSure">确认收货</div>
          </div>
        </div>
      </div>
    </common-scroll>
  </div>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import OrderList from '../components/list'
import CommonScroll from 'common/scroll/scroll'
export default {
  name: 'OrderDetail',
  components: {
    CommonBack,
    OrderList,
    CommonScroll
  },
  data () {
    return {
      title: '订单详情',
      logistics: [
        {
          title: '物流单号：',
          content: '2382832'
        },
        {
          title: '物流公司：',
          content: '顺丰速运'
        }
      ],
      info: {},
      list: []
    }
  },
  created () {
    this.getDeatil()
  },
  methods: {
    handleAfterSale () {
      this.$router.push({
        path: '/afterSale'
      })
    },
    getDeatil () {
      const id = this.$route.params.id
      this.$api.order.detail({ order_id: id })
        .then(this.getDetailSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getDetailSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        this.info = data.order
        this.list = data.order.goods
      }
    },
    handleSure () {
      this.getSure()
    },
    getSure () {
      const id = this.$route.params.id
      this.$api.order.sure({ order_id: id })
        .then(this.getSureSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getSureSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        this.$tip(res.msg)
        this.$router.push({
          path: '/me/order/all'
        })
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.detail-wrap
  background-color $space

  .scroll
    top 90px
    background-color $space

  .list
    margin-bottom 20px

  .info
    width 100%

    .order-time-list
      width 100%
      background-color $common_bgc
      margin-bottom 20px

      .order-time-item
        width 100%
        height 92px
        display flex
        padding()
        align-items center
        justify-content space-between

        .order-time-item-title, .time
          font-size $shop_name
          font-weight 400
          color $footer_bgc
          line-height 92px

        .time
          color $location

    .logistics-list
      width 100%
      background-color $common_bgc
      margin-bottom 20px
      padding-top 5px
      padding-bottom 5px
      box-sizing border-box

      .logistics-item
        width 100%
        display flex
        padding()
        line-height 62px

        .logistics-item-title
          font-size $shop_name
          font-weight 400
          color $footer_bgc
          min-width 160px
          height 64px

        .logistics-item-content
          font-size $shop_name
          font-weight 400
          color $footer_bgc

    .btn-wrap
      background-color $common_bgc
      width 100%
      height 224px
      padding-top 44px
      display flex
      justify-content flex-end

      .btn
        width 182px
        line-height 76px
        text-align center
        height 76px
        box-sizing border-box
        border 2px solid $tab_active
        border-radius 10px
        font-size $shop_name
        font-weight 400
        color $tab_active

      .after-sale
        margin-right 46px
        border-color $footer_bgc
        color $footer_bgc

      .affirm
        margin-right 14px

.v-loading
  position fixed
  top 50%
  left 50%
  transform translate(-50%, -50%)
  z-index 100
  padding-left 10px
  padding-right 10px
  padding-top 10px
  padding-bottom 10px
  border-radius 3px
  background-color rgba(0, 0, 0, 0.5)
</style>
